<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
        <title>vue2-element-project</title>
        <style>
            .m-loading-mask {
                position: fixed;
                z-index: 2000;
                background-color: rgba(255, 255, 255, 0.9);
                margin: 0;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                -webkit-transition: opacity 0.3s;
                transition: opacity 0.3s;
            }
            .m-loading-spinner {
                top: 50%;
                margin-top: -25px;
                width: 100%;
                text-align: center;
                position: absolute;
            }
            .m-out-loading-spinner {
                top: 50%;
                margin-top: -25px;
                width: 100%;
                text-align: center;
                position: absolute;
            }
            .m-loading-spinner .m-circular {
                margin-top: 5px;
                height: 50px;
                width: 50px;
                -webkit-animation: m-loading-rotate 1s linear infinite;
                animation: m-loading-rotate 1s linear infinite;
            }
            .m-out-loading-spinner .m-circular {
                height: 60px;
                width: 60px;
                -webkit-animation: m-loading-rotate 0.5s linear infinite;
                animation: m-loading-rotate 0.5s linear infinite;
            }
            .m-path {
                stroke-width: 2;
                stroke: #409eff;
                stroke-linecap: round;
            }
            @keyframes m-loading-rotate {
                100% {
                    -webkit-transform: rotate(360deg);
                    transform: rotate(360deg);
                }
            }
        </style>
    </head>
    <body>
        <noscript>
            <strong>
                We're sorry but vue2-element-project doesn't work properly without JavaScript enabled. Please enable it
                to continue.
            </strong>
        </noscript>
        <div id="app">
            <div class="m-loading-mask" id="m-loading">
                <div class="m-loading-spinner">
                    <svg class="m-circular">
                        <circle
                            cx="25"
                            cy="25"
                            r="20"
                            fill="none"
                            class="m-path"
                            style="stroke-dasharray: 90, 120; stroke-dashoffset: 0"
                        ></circle>
                    </svg>
                </div>
                <div class="m-out-loading-spinner">
                    <svg class="m-circular">
                        <circle
                            cx="30"
                            cy="30"
                            r="25"
                            fill="none"
                            class="m-path"
                            style="stroke-dasharray: 100, 120; stroke-dashoffset: 0"
                        ></circle>
                    </svg>
                </div>
            </div>
        </div>
    </body>
</html>
